<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">门店租借电池价格模版</view>
		</view>
		<view class="list-body">
			<scroll-view scroll-y>
				<view class="cu-card" v-for="(item,index) in listData" :key="index">
					<view class="cu-item padding-sm bg-white">
						<view class="text-orange text-lg text-bold">{{item.title}}</view>
						<view v-if="item.id == 0">电池类型价格项：{{item.itemCount}}个</view>
						<view v-else>自定义电池类型价格项：{{item.itemCount}}个</view>
						<view v-if="item.createDate">创建时间：{{item.createDate}}</view>
						<view class="flex justify-end margin-top-sm">
							<view class="margin-right-sm" v-if="item.id"><button class="cu-btn bg-red sm" @click="btnDel(item)">删除</button></view>
							<view class="margin-right-sm" v-if="item.id"><button class="cu-btn bg-grey sm" @click="toUpdate(item)">修改</button></view>
							<view><button class="cu-btn bg-orange sm" @click="toInfo(item)">查看</button></view>
						</view>
					</view>
				</view>
				<view class="foot" v-if="listData && listData.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
		</view>
		<view class="cu-bar btn-group list-footer">
		    <button class="cu-btn bg-orange round" @click="toAdd()">新增价格模版</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData:[]
			};
		},
		onShow() {
			this._loadListData();
		},
		methods: {
			_loadListData:function(){
				const _self = this;
				const api = this.$request;
				api.post(api.url.bxscnShopFeeList,{},(res)=>{
					if(res.code == 200){
						_self.listData = res.body.items;
					}else if(res.code == 202){
						_self.pageNo = -1;
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false,
							complete:function(){
								uni.navigateBack();
							}
						})
					}else{
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}
				})
			},
			btnDel:function(item){
				if(item.id){
					const _self = this;
					const api = this.$request;
					uni.showModal({
						title:'温馨提示',
						content:'确定要删除【' + item.title + '】吗？',
						complete:function(res){
							if(res.confirm){
								api.post(api.url.bxscnShopFeeDel,{
									id:item.id
								},(res)=>{
									if(res.code == 200){
										uni.showToast({
											title:'删除成功',
											icon:'success'
										})
										_self._loadListData();
									}else if(res.msg){
										uni.showModal({
											content:res.msg,
											showCancel:false
										})
									}else{
										uni.showToast({
											title:'操作失败',
											icon:'error'
										})
									}
								})
							}
						}
					})
				}else{
					uni.showModal({
						title:'温馨提示',
						content:item.title + '不允许删除',
						showCancel:false
					})
				}
			},
			toUpdate:function(item){
				if(item.id){
					uni.navigateTo({
						url:'./edit',
						success: function(res) {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('fromData', item)
						}
					})
				}else{
					uni.showModal({
						title:'温馨提示',
						content:item.title + '不允许修改',
						showCancel:false
					})
				}
			},
			toInfo:function(item){
				uni.navigateTo({
					url:'./template?id='+item.id
				})
			},
			toAdd:function(){
				uni.navigateTo({
					url:'./edit'
				})
			}
		}
	}
</script>

<style lang="less">
.list-body scroll-view{height:90vh;}
.list-body .cu-card>.cu-item{position:relative;margin-bottom:0;}
.list-footer{position:fixed;bottom:0;width:100vw;}
</style>
